<template>
  <div>
    <!-- 头部导航 -->
    <Nav></Nav>

    <!-- banner 及快速注册功能 -->
    <div class="navbar-banner layout-no-margin-top">
      <div class="banner-container">
        <div class="container">
          <div class="row">
            <div class="col-md-7">
              <a class="container-title">
                <img src="../assets/img/container-title-2.png" />
              </a>
              <div style="margin-top:24px;">
                <a
                  id="course-btn"
                  class="course-btn btn btn-lg"
                  href="courses/index.html"
                >进入课程</a>
              </div>
            </div>

            <!-- banner注册 -->
            <div class="col-md-5">

              <form>
                <div class="form-group">
                  <input
                    v-model="regData.nickName"
                    class="form-control"
                    placeholder="昵称"
                  >
                  <div class="help-block text-left">{{regData.nickNameHelp}}</div>
                </div>
                <div class="form-group">
                  <input
                    v-model="regData.email"
                    class="form-control"
                    placeholder="邮箱"
                  >
                  <div class="help-block text-left">{{regData.emailHelp}}</div>
                </div>
                <div class="form-group">
                  <input
                    v-model="regData.password"
                    type="password"
                    class="form-control"
                    placeholder="密码"
                  >
                  <div class="help-block text-left">{{regData.passwordHelp}}</div>
                </div>
                <button
                  class="btn register"
                  @click.prevent="reg"
                >加入实验楼</button>
                <p class="tip">点击"加入实验楼"，表示您已经同意我们的<a
                    href="privacy/index.html"
                    target="_blank"
                  > 隐私条款</a></P>
              </form>

            </div>

          </div>
        </div>
      </div>
    </div>

    <!-- introduce 简介 -->
    <div class="introduce-container">
      <div class="container">
        <div class="row">
          <div class="introduce-unit col-sm-6 col-md-3">
            <div><a class="introduce-img"><img src="../assets/img/introduceContainer1.gif" /></a></div>
            <div><span class="introduce-span">丰富全面的计算机实验课程</span></div>
          </div>
          <div class="introduce-unit col-sm-6 col-md-3">
            <div><a class="introduce-img"><img src="../assets/img/introduceContainer2.gif" /></a></div>
            <div><span class="introduce-span">在线编程环境，1秒启动</span></div>
          </div>
          <div class="introduce-unit col-sm-6 col-md-3">
            <div><a class="introduce-img"><img src="../assets/img/introduceContainer3.gif" /></a></div>
            <div><span class="introduce-span">每天一个项目课，丰富你的项目经验</span></div>
          </div>
          <div class="introduce-unit col-sm-6 col-md-3">
            <div><a class="introduce-img"><img src="../assets/img/introduceContainer4.gif" /></a></div>
            <div><span class="introduce-span">有效学习时间，真实记录你的代码生涯</span></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 学习路径 -->
    <div class="line-and-laboratory">
      <div class="container">
        <div class="clearfix text-center item-header">
          <span class="line"></span>
          <span class="text-center item-title">学习路径</span>
          <span class="line"></span>
        </div>
        <div class="tab-content">
          <div
            class="tab-pane clearfix active"
            id="study-line"
          >
            <!-- 单个路径 -->
            <myPath
              v-for='path in paths'
              :path='path'
              :key='path.id'
              class="col-xs-12 col-sm-6 col-md-4"
            ></myPath>
          </div>
        </div>
      </div>
    </div>

    <!-- 实验课程 -->
    <div class="line-and-laboratory">
      <div class="container">
        <div class="clearfix text-center item-header">
          <span class="line"></span>
          <div class="text-center item-title">实验课程</div>
          <span class="line"></span>
        </div>
        <div class="clearfix courses">
          <Course
            v-for='item in courses'
            :key='item.id'
            :course='item'
            class="col-md-3 col-sm-6 course"
          ></Course>
        </div>
        <div class="clearfix item-footer">
          <div class="pull-right watch-all">
            <a href="courses/index.html">查看更多 ></a>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航 -->
    <Footer></Footer>
  </div>
</template>
<script>
import Footer from '@/components/Footer'
import Nav from '@/components/Nav'
import myPath from '@/components/Path'
import Course from '@/components/Course'
export default {
  components: {
    Footer,
    Nav,
    myPath,
    Course
  },
  data() {
    return {
      errorMessage: '如果有错误,这里显示', // 登录/注册错误信息
      regData: {
        nickName: '',
        nickNameHelp: '',
        email: 'reg@123.com',
        emailHelp: '',
        password: 'xxxxxxxx',
        passwordHelp: ''
      },
      paths: [
        {
          id: 1,
          title: '新手入门',
          img: 'http://iopsyche.gitee.io/static/syl/assets/img/1471513730333.png',
          courseTotal: 6,
          desc: '新手入门路径帮助对 IT 技术感兴趣的新手0基础入门计算机编程。本路径通过新手入门、Linux 及 Vim课程熟悉实验楼的实践学习环境，再以 C 语言和一个简单的项目引导你一步步进入计算机技术的殿堂。'
        },
        {
          id: 2,
          title: 'Python研发工程师',
          img: 'http://iopsyche.gitee.io/static/syl/assets/img/1471513769430.png',
          courseTotal: 83,
          desc: 'Python技术路径中包含入门知识、Python基础、Web框架、基础项目、网络编程、数据与计算及综合项目七个模块。模块中的课程将带着你逐步深入，学会如何使用 Python 实现项目一个博客，桌面词典，微信机器人或网络安全软件等。完成本路径的实验课，将具备独立开发 Python 软件和 Web 应用的能力。'
        },
        {
          id: 3,
          title: 'C++ 研发工程师',
          img: 'http://iopsyche.gitee.io/static/syl/assets/img/1471513793360.png',
          courseTotal: 26,
          desc: 'C++ 学习路径中将通过使用 C++ 语言实现 Web 服务器，Markdown 解析器，内存池以及 Docker 容器管理工具等，学习并实践 C++ 编程基础，C++ 11/14 标准，C++ 图像处理及增强现实技术。完成本路径的所有实验课，将能够使用 C++ 独立实现复杂的应用程序。'
        },
        {
          id: 4,
          title: '大数据工程师',
          img: 'http://iopsyche.gitee.io/static/syl/assets/img/1471513926288.png',
          courseTotal: 36,
          desc: '大数据学习路径中会学习并实践 Java、Scala、Hadoop、HBase、Mahout、Sqoop及Spark等大数据技术，本路径通过大量的动手实验，在实验数据集上实践各种大数据工具，帮助你成长为具备动手能力的大数据工程师。'
        }
      ],
      courses: [
        {
          id: 1,
          title: 'Linux 基础入门（新版）',
          img: 'http://iopsyche.gitee.io/static/syl/assets/img/ncn1.jpg',
          totalNum: 85157
        },
        {
          id: 2,
          title: 'Go语言编程',
          img: 'http://iopsyche.gitee.io/static/syl/assets/img/ncn11.jpg',
          totalNum: 5741
        },
        {
          id: 3,
          title: 'PHP编程语言',
          img: 'http://iopsyche.gitee.io/static/syl/assets/img/ncn23.jpg',
          totalNum: 4338
        },
        {
          id: 4,
          title: 'Python Django Web框架',
          img: 'http://iopsyche.gitee.io/static/syl/assets/img/ncn30.jpg',
          totalNum: 85157
        }
      ]
    }
  },
  methods: {
    reg() {
      console.log('reg')
    }
  }
}
</script>

<style>
/* modal 模态框*/
#invite-user .modal-body {
  overflow: hidden;
}
#invite-user .modal-body .form-label {
  margin-bottom: 16px;
  font-size: 14px;
}
#invite-user .modal-body .form-invite {
  width: 80%;
  padding: 6px 12px;
  background-color: #eeeeee;
  border: 1px solid #cccccc;
  border-radius: 5px;
  float: left;
  margin-right: 10px;
}
#invite-user .modal-body .msg-modal-style {
  background-color: #7dd383;
  margin-top: 10px;
  padding: 6px 0;
  text-align: center;
  width: 100%;
}
#invite-user .modal-body .modal-flash {
  position: absolute;
  top: 53px;
  right: 74px;
  z-index: 999;
}
/* end modal */

.en-footer {
  padding: 30px;
  text-align: center;
  font-size: 14px;
}
.navbar-banner {
  margin-top: 50px;
  background: url("../assets/img/homepage-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
}
</style>
